<template>
  <view class="systemMessage">
    <u-navbar
        :background="navbar.background"
        :border-bottom="false"
        :is-back="false"
        :title="$t('消息')"
        :title-color="navbar.color"
        title-width="300"
    >
      <view slot="right">
        <view style="padding: 0 20rpx;color:#e7e7e7" @click="allRead">
          {{ $t('全部已读') }}
        </view>
      </view>
    </u-navbar>
    <view v-if="userInfo && !userInfo.appV1" class="u-search">
      <u-search v-model="content" :placeholder="$t('关键词')" @change="downCallback" @custom="downCallback"></u-search>
    </view>
    <mescroll-uni
        ref="mescrollRef"
        :down="downOption"
        :top="computTop"
        :up="upOption"
        @down="downCallback"
        @emptyclick="emptyClick"
        @init="mescrollInit"
        @up="upCallback"
    >
      <good-list-v1 v-if="userInfo&&userInfo.appV1" :list="goods"></good-list-v1>
      <good-list v-else :list="goods"></good-list>
    </mescroll-uni>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import {
  mapGetters,
  mapMutations
} from 'vuex'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import goodList from "./components/goodList.vue";
import goodListV1 from "./components/goodListV1.vue";

export default {
  mixins: [MescrollMixin],
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computTop() {
      if (this.userInfo && this.userInfo.appV1) {
        // #ifdef H5
        return '88'
        // #endif
        // #ifndef H5
        return '150'
        // #endif
      } else {
        // #ifdef H5
        return '240'
        // #endif
        // #ifndef H5
        return '240'
        // #endif
      }
    }
  },
  components: {
    goodList,
    goodListV1
  },
  data() {
    return {
      navbar: {
        color: "#fff",
        background: {
          backgroundColor: '#0079FF'
        },
      },
      downOption: {
        auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: `~ ${this.$t('暂无记录')} ~`,
          fixed: true,
          top: "200rpx",
        },
        textNoMore: `-- ${this.$t('触底了')} --`
      },
      goods: [],//列表数据
      content: '',
    }
  },
  onLoad(e) {
  },
  onShow() {
    this.$lizhao.appV1.init()
  },
  methods: {
    allRead() {
      uni.showModal({
        title: this.$t('提示'),
        content: this.$t('是否标记所有消息为已读状态'),
        cancelText: this.$t('取消'),
        confirmText: this.$t('确定'),
        success: res => {
          if (res.confirm) {
            this.$u.post(this.api.GLOBAL_app_notice_allRead, {}).then(res => {
              if (res.code === 200) {
                uni.showToast({
                  title: this.$t('标记成功')
                });
                this.$lizhao.appV1.init()
                this.downCallback()
								uni.removeTabBarBadge({
									index: 2
								})
              }
            })
          }
        }
      });
    },
    downCallback() {
      this.goods = []
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      if (this.userInfo && this.userInfo.appV1) {
        this.getNoticesByUser(page)
      } else {
        this.PrintingRecord(page)
      }
    },
    //新版消息
    getNoticesByUser(page) {
      let req = {
        pageSize: page.size, //每页的数量
        pageNum: page.num, // 当前显示第几页
        page: true,
        content: this.content,
        title: ""
      }
      //章的接口
      this.$u.get(this.api.GLOBAL_app_notice_getNoticesByUser, req).then(res => {
        if (page.num === 1) {
          this.goods = [];
        }
        if (res.code === 200 && res.data && res.data.list) {
          this.mescroll.endBySize(res.data.list.length, res.data.total);
          this.goods = this.goods.concat(res.data.list)
					setTimeout(()=>{
						this.getNewsBadge()
					},200)
        } else {
          this.mescroll.endBySize(0, 0);
          this.goods = []
        }
      }).catch((err) => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },
    //旧版消息
    PrintingRecord(page) {
      let req = {
        pageSize: page.size, //每页的数量
        pageNum: page.num, // 当前显示第几页
        page: true,
        content: this.content,
        title: ""
      }
      //章的接口
      this.$u.post(this.api.GLOBAL_auth_notice_getNoticesByUser, req).then(res => {
        if (page.num === 1) {
          this.goods = [];
        }
        if (res.code === 200 && res.data && res.data.list) {
          this.mescroll.endBySize(res.data.list.length, res.data.total);
          this.goods = this.goods.concat(res.data.list)
					setTimeout(()=>{
						this.getNewsBadge()
					},200)
        } else {
          this.mescroll.endBySize(0, 0);
          this.goods = []
        }
      }).catch((err) => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },
		getNewsBadge() {
		  if (this.userInfo.appV1 === true) {
		    uni.$u.get(this.api.GLOBAL_app_notice_alarm, {}).then((res) => {
		      if (res.code === 200 && res.data) {
		        if (res.data.unreadCount !== 0) {
		          uni.setTabBarBadge({
		            index: 2,
		            text: '' + res.data.unreadCount
		          })
		        } else {
		          uni.setTabBarBadge({
		            index: 2
		          })
		        }
		      }else{
						uni.removeTabBarBadge({
							index: 2
						})
					}
		    })
		  } else {
		    //请求原来接口
		    uni.$u.post(this.api.GLOBAL_auth_notice_getCountByNotViewedFromLogin, {}).then((res) => {
		      if (res.code === 200 && res.data) {
		        uni.setTabBarBadge({
		          index: 2,
		          text: '' + res.data
		        })
		      }else{
						uni.removeTabBarBadge({
							index: 2
						})
					}
		    })
		  }
		},
    //点击空布局按钮的回调
    emptyClick() {
    }
  }
}
</script>
<style lang="less" scoped>
.systemMessage {
  .u-search {
    padding: 10rpx 20rpx;
  }
}
</style>

